<script>
/**
 * 首页视频列表
 */

import VideoBox from "@/components/VideoBox.vue";
import useVideoInfoStore from "@/stores/video";
import {computed} from "vue";
import router from "@/router";
import routerName from "@/stores/router-name";

export default {
  name: "HomeVideo",
  components: {VideoBox},

  setup(){
    const videoStore = useVideoInfoStore();
    const homeVideoV = computed(()=>useVideoInfoStore().categories.home)
    return{
      videoStore,
      homeVideoV,
    }
  },

  data(){
    return{
      loading: false,
      pageNum:1,
      scrollElementId: 'videoScroll',
      name:'home',
    }
  },

  computed:{
    noMore(){
      return this.videoStore.isFull;
    },
    disabled(){
      return this.loading || this.noMore;
    }
  },

  methods:{
    // 按页加载视频数据
    async load(){
      console.log('获取第' + this.pageNum + '页数据')
      this.loading = true
      setTimeout(  async ()=>{
        const success = await this.videoStore.getHomeVideoPage(this.pageNum)
        if(!success){
          await router.replace(routerName().notFound)
          return;
        }
        this.pageNum++;
      }, 200)
      this.loading = false
    },
    // 设置滑动距离
    setScrollTop(containerId){
      const container = document.getElementById(containerId);
      if(container){
        container.scrollTop = this.videoStore.config.scrollTop
      }
    },
    // 保存滑动距离
    saveScrollTop(){
      const container = document.getElementById(this.scrollElementId);
      if(container) {
        this.videoStore.config.scrollTop = container.scrollTop;
      }
    },
    // 保存页码
    savePageNum(){
      this.videoStore.config[this.name] = this.pageNum;
    },
    // 初始化页码
    initPageNum(){
      const videoStore = this.videoStore;
      if(videoStore.config[this.name] !== undefined)
        this.pageNum = videoStore.config[this.name];
    },
    // 初始化视频
    initVideoValue(){
      const videoStore = this.videoStore;
      if(videoStore.categories[this.name].length === undefined ||
          videoStore.categories[this.name].length === 0)
        this.load();
    },
    // 初始化滑动位置
    initScrollTo(){
      if(this.videoStore.config.scrollTop !== 0)
        this.setScrollTop(this.scrollElementId);
    },

    // 进入组件时的初始化工作
    init(){
      // 设置pageNum
      this.initPageNum();
      // 设置视频
      this.initVideoValue();
      // 设置历史滑动位置
      this.initScrollTo();
    }

  },

  mounted() {
    this.init();
  },

  beforeRouteLeave(to){
    // 跳转的路由不是playVideo，则滑动距离为0
    if(to.name === routerName().playVideo){
      this.saveScrollTop();
    }else{
      this.videoStore.setScrollZero();
    }
    // 保存页码
    this.savePageNum();
  }


}
</script>

<template>
<div class="homeVideo" :id="scrollElementId">
      <div v-infinite-scroll="load"
           infinite-scroll-immediate="true"
           :infinite-scroll-disabled="disabled"
           infinite-scroll-distance="20">
        <VideoBox v-for="(item, index) in homeVideoV"
                  :key="index"
                  :id="item.id"
                  :video-item="item"
                  ></VideoBox>
      </div>
</div>
</template>

<style scoped>
:deep(.el-scrollbar__wrap--hidden-default){
  width: 100%;
}
.homeVideo{
  padding: 0 1.33333vmin;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  height: 100%;
}

</style>